/**
 * 视频播放对话框
 */
Vue.component('player-dialog', {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data: function () {
        return {
            currentVideo: {},
            currentAudio: {},
            videoURLData: [],
            loadingStream: false,
        }
    },
    mounted() {
        this.loadingStream = true
    },
    methods: {
        showLoad() {
            this.loadingStream = true
        },

        //加载
        load(stream) {
            request.get(`/api/getStreamInfo?path=${stream}`).then(res => {
                if (res.data) {
                    this.loadingStream = false
                    let data = res.data;
                    if (data.code === 0) {
                        let d = data.data
                        if(d) {
                            this.currentVideo = d.video
                            this.currentAudio = d.audio
                            this.videoURLData = []
                            for (let [k, v] of Object.entries(d.preview)) {
                                this.videoURLData.push({
                                    name: k,
                                    url: v
                                })
                            }
                            this.$refs["videoPlayer"].play(d.preview.ws_flv)
                        } else {
                            this.$message.error("流已关闭");
                            this.closePreviewDialog()
                            this.$emit('refresh');
                        }
                    } else {
                        this.$message.error(data.msg);
                    }
                }
            }).catch(onError);
        },

        closePreviewDialog() {
            this.currentVideo = {}
            this.currentAudio = {}
            this.videoURLData = []
            this.$refs["videoPlayer"].destory()
            this.$emit('update:visible', false)
        },
    },
    template: `
     
       <el-dialog title="预览" :visible="visible" v-if="visible" width="60%"
               :close-on-click-modal="false" @close="closePreviewDialog" top="50px" :lock-scroll="true">
        
        <div v-loading="loadingStream" element-loading-text="正在转码" element-loading-background="rgba(0, 0, 0, 0)">
            <player ref="videoPlayer" style="width: 100%; height: 380px;"></player>
        </div>
        <el-skeleton :rows="9" :loading="loadingStream" animated style="margin-top: 20px">
          <template>
            <el-tabs value="urls" type="card">
                <el-tab-pane label="播放地址" name="urls">
                    <el-table :data="videoURLData" style="width: 100%">
                        <el-table-column prop="name" label="类型" width="180"></el-table-column>
                        <el-table-column prop="url" label="播放地址" ></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="媒体信息" name="info">
                    <el-descriptions title="视频信息">
                        <el-descriptions-item label="视频编码">{{ currentVideo.codec_id_name }}</el-descriptions-item>
                        <el-descriptions-item label="FPS">{{ currentVideo.fps }}</el-descriptions-item>
                        <el-descriptions-item label="大小(宽x高)">{{ currentVideo.width }} x {{ currentVideo.height }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions title="音频信息" style="margin-top: 12px">
                        <el-descriptions-item label="音频编码">{{ currentAudio.codec_id_name }}</el-descriptions-item>
                        <el-descriptions-item label="音频通道数">{{ currentAudio.channels }}</el-descriptions-item>
                        <el-descriptions-item label="音频采样位数">{{ currentAudio.sample_bit }}</el-descriptions-item>
                        <el-descriptions-item label="音频采样率">{{ currentAudio.sample_rate }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
            </el-tabs>
        </template>
       </el-skeleton>
    </el-dialog>
    `
});